<template>
  <div class="signed-agent-detail-contacts-view">

    <el-button class="border-btn" size="small" style="margin-bottom: 20px;" @click="addClick">新建联系人</el-button>

    <el-table :data="tableData" header-cell-class-name="table-header" size="medium" border>
      <el-table-column type="tags" label="联系人编号" align="center" />
      <el-table-column type="tags" label="联系人姓名" align="center" />
      <el-table-column type="tags" label="职位" align="center" />
      <el-table-column type="tags" label="联系电话" align="center" />
      <el-table-column type="tags" label="创建时间" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="{row}">
          <el-button type="text">编辑</el-button>
          <el-button type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <add-contacts-dialog ref="addContacts" />

  </div>
</template>

<script>
import addContactsDialog from './addContactsDialog.vue'
import {defineComponent, ref} from 'vue'

export default defineComponent({
  name: 'ContactsView',
  components: { addContactsDialog },
  setup() {
    var addContacts = ref(null)
    var tableData = ref([])

    const addClick = () => {
      addContacts.value.openDialog()
    }

    return {
      addContacts,
      tableData,

      addClick,
    }
  }
})
</script>

<style scoped>

</style>
